<template>
    <div style="display: flex; justify-content: center">
        <timeLine
            :timeLineList="timeLineList"
            :curTimeIndex="curTimeIndex"
            :obj="obj"
        ></timeLine>
    </div>
</template>

<script>
import timeLine from './components/timeLine';
export default {
    name: 'layout',
    components: { timeLine },
    props: {
        obj: { type: Object }
    },
    data() {
        return {
            timeLineList: [
                { time: '00时 0分', lineType: 'blod', color: 'red' },
                { time: '00时 10分', lineType: 'thin', color: 'blue' },
                { time: '00时 20分', lineType: 'thin', color: 'blue' },
                { time: '00时 30分', lineType: 'thin', color: 'blue' },
                { time: '00时 40分', lineType: 'thin', color: 'blue' },
                { time: '00时 50分', lineType: 'thin', color: 'blue' }
            ],
            curTimeIndex: 0,
            startTime: 8,
            defaultShowNum: 24 //默认显示多少个小时
        };
    },
    watch: {
        obj: {
            handler() {
                console.log('this.obj2222', this.obj);
                if (this.obj) {
                    if (this.obj.attribute.style.startTime) {
                        this.startTime = this.obj.attribute.style.startTime;
                    }
                    if (this.obj.attribute.style.showHoursNum) {
                        this.defaultShowNum = this.obj.attribute.style.showHoursNum;
                    }
                } else {
                    this.startTime = 8;
                    this.defaultShowNum = 24;
                }
                this.getTimeData();
            },
            immediate: true,
            deep: true
        }
    },
    created() {
        this.getTimeData();
    },
    methods: {
        getTimeData() {
            //真正数据到了之后，拿到当前时间点儿，然后在数据中匹配对应的数据，找到索引后，赋值给timeIndex
            //同时也可以处理当前时间点为中心点，同时处理point和point_end

            //先整理出一个以当前时间点儿为中心的时间轴数据，（前后各12个小时）(待删)

            let curTimeStamp = new Date().getTime(); //当前时间点的时间戳 .getTime()获取毫秒
            // 获取当天 8 点的时间戳
            let curTimeStamp8 = new Date(
                new Date().setHours(this.startTime, 0, 0, 0)
            ).getTime();
            let start = '';
            let end = '';
            //如果是当前凌晨0-8时间段，时间轴采用昨天的8点到今天的8点
            if (curTimeStamp < curTimeStamp8) {
                start = curTimeStamp8 - 86400 * 1000; //昨天 8 点
                end = curTimeStamp8;
            } else {
                // 如果当前时间点是今天8点，时间轴采用今天的8点到明天的8点
                start = curTimeStamp8;
                end = curTimeStamp8 + 86400 * 1000; //一天是86400秒
            }

            let len = (this.defaultShowNum * 60 * 60 * 1000) / (10 * 60 * 1000);
            let arr = [];

            for (let i = 0; i <= len; i++) {
                if (start <= end) {
                    arr.push({
                        time: this.timeRoundBy10(
                            this.formatTime('yyyy-MM-dd hh:mm', new Date(start))
                        ),
                        lineType: i % 6 === 0 ? 'blod' : 'thin',
                        color: i % 6 === 0 ? 'red' : 'blue'
                    });
                    start = start + 10 * 60 * 1000;
                }
            }
            this.timeLineList = arr;
            console.log('arr', arr);

            // 拿到当前时间点儿，然后在数据中匹配对应的数据，找到索引后，赋值给timeIndex
            let curTime = this.timeRoundBy10(
                this.formatTime('yyyy-MM-dd hh:mm', new Date())
            );
            this.curTimeIndex = arr.findIndex(item => item.time === curTime);
            console.log('this.timeIndex', this.timeIndex);
        },
        //格式化时间  formatTime('yyyy-MM-dd hh:mm:ss') // "2018-06-20 16:11:59"
        formatTime(fmt, time) {
            // console.log('time',time); // Wed Jun 20 2018 16:12:12 GMT+0800 (中国标准时间)
            let o = {
                'M+': time.getMonth() + 1, // 月份
                'd+': time.getDate(), // 日
                'h+': time.getHours(), // 小时
                'm+': time.getMinutes(), // 分
                's+': time.getSeconds(), // 秒
                'q+': Math.floor((time.getMonth() + 3) / 3), // 季度
                S: time.getMilliseconds() // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(
                    RegExp.$1,
                    (time.getFullYear() + '').substr(4 - RegExp.$1.length)
                );
            for (let k in o) {
                if (new RegExp('(' + k + ')').test(fmt))
                    fmt = fmt.replace(
                        RegExp.$1,
                        RegExp.$1.length === 1
                            ? o[k]
                            : ('00' + o[k]).substr(('' + o[k]).length)
                    );
            }
            return fmt;
        },
        // 以10分钟向上取整  timeRoundBy10('2020-10-10 11:01') // => 2020-10-10 11:10
        timeRoundBy10(timeStr) {
            timeStr = timeStr.replace(/-/g, '/');
            let oDate = new Date(timeStr);
            let stamp = oDate.getTime();
            let minute = oDate.getMinutes();
            let last = minute % 10;
            if (last) {
                stamp += (10 - last) * 60 * 1000;
            }
            oDate = new Date(stamp);

            let t = {
                year: this.pad_2_0(oDate.getFullYear()),
                month: this.pad_2_0(oDate.getMonth() + 1),
                day: this.pad_2_0(oDate.getDate()),
                hour: this.pad_2_0(oDate.getHours()),
                minute: this.pad_2_0(oDate.getMinutes()),
                second: this.pad_2_0(oDate.getSeconds())
            };
            let res = `${t.month}-${t.day} ${t.hour}:${t.minute}`;
            return res;
        },
        pad_2_0(num) {
            return num >= 10 ? num : '0' + num;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
    font-weight: normal;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
</style>
